<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript">
        var basePath = "${basePath}";
    </script>
    <script type="text/javascript" src="${basePath}js/jquery/jquery-1.11.1.min.js" ></script>

    <script type="text/javascript" src="${basePath}js/charts/highcharts.js"></script>
    <!--
    <script src="http://code.highcharts.com/highcharts.js"></script>
    -->

</head>
<body>
<div id="container" style="width: 90%; height: 80%; margin: 0 auto"></div>
<script language="JavaScript">
    $(document).ready(function() {
        var categories = new Array();
        var data1 = new Array();
        var data2 = new Array();

        $.ajax({
            type:"get",
            url: basePath + "report/morningBloodSugarReport",
            beforeSend: function(request) {
                request.setRequestHeader("header", localStorage.getItem("token"));
            },
            data:{},
            async:false,
            cache:true,
            dataType: "json", //this is important
            success:function(data) {
                $.each(data.categories, function(i, item) {
                    categories[i] = item;
                });
                $.each(data.data1, function(i, item) {
                    data1[i] = item;
                });
                $.each(data.data2, function(i, item) {
                    data2[i] = item;
                });
            },
            error : function(data) {
                alert("error:" + data);
            }
        });

        var title = {
            text: '早晨血糖变化图'
        };
        var subtitle = {
            text: 'Source: 自我采集'
        };
        var xAxis = {
            categories: categories
        };
        var yAxis = {
            title: {
                text: '血糖值'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        };

        var tooltip = {
            valueSuffix: '\xB0C'
        };

        var legend = {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        };

        var series =  [
            {
                name: '早餐后2小时',
                data: data2
            },
            {
                name: '空腹',
                data: data1
            }
        ];

        var json = {};

        var chart = {
            type: 'spline'
        };
        json.chart= chart;
        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.legend = legend;
        json.series = series;

        $('#container').highcharts(json);
    });
</script>
</body>
</html>